<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="layout/template.xhtml">

	<ui:define name="body">
	
		<h:messages globalOnly="true" styleClass="message" errorClass="errormsg" infoClass="infomsg" warnClass="warnmsg" id="globalMessages"/>

		<h:form id="round" styleClass="edit">
	
			<rich:panel>
				<f:facet name="header">#{roundHome.managed ? 'Edit' : 'Add'} Round</f:facet>

				<s:decorate id="golferField" template="layout/display.xhtml">
					<ui:define name="label">Golfer</ui:define>
					#{round.golfer.name}
				</s:decorate>
				
				<s:decorate id="dateField" template="layout/edit.xhtml">
					<ui:define name="label">Date</ui:define>
					<ui:remove>MM/dd/yyyy</ui:remove>
					<rich:calendar id="date" datePattern="MMM dd, yyyy" required="true" value="#{round.date}"/>
				</s:decorate>

				<s:decorate id="notesField" template="layout/edit.xhtml">
					<ui:define name="label">Notes</ui:define>
					<h:inputTextarea id="notes" cols="80" rows="3" value="#{round.notes}"/>
				</s:decorate>

				<s:decorate id="totalScoreField" template="layout/edit.xhtml">
					<ui:define name="label">Total score <span style="font-weight: normal;">&#8224;</span></ui:define>
					<h:inputText id="totalScore" value="#{round.totalScore}" style="width: 3em;">
						<a:support event="onblur" reRender="totalScoreField" bypassUpdates="true" ajaxSingle="true"/>
					</h:inputText>
				</s:decorate>

				<s:decorate id="weatherField" template="layout/edit.xhtml">
					<ui:define name="label">Weather</ui:define>
					<h:selectOneMenu id="weather" value="#{round.weather}" required="true">
						<s:selectItems var="_weather" value="#{weatherCategories}"
							label="#{_weather.label}" noSelectionLabel="-- Select --"/>
						<s:convertEnum/>
					</h:selectOneMenu>
				</s:decorate>

				<s:decorate id="teeSetField" template="layout/edit.xhtml">
					<ui:define name="label">Tee set</ui:define>
					<h:selectOneMenu id="teeSet" value="#{round.teeSet}">
						<s:selectItems var="_teeSet" value="#{teeSets}" noSelectionLabel="-- Select --"
							label="#{_teeSet.course.name} - #{_teeSet.color}"/>
						<s:convertEntity/>
						<ui:remove>
						<a:support id="teeSetChange" event="onchange" reRender="save,teeSetTab" ajaxSingle="true"/>
						</ui:remove>
					</h:selectOneMenu>
				</s:decorate>

				<div style="clear:both">
					<span class="required">*</span> required fields<br />
					<span>&#8224;</span> required only if not providing hole-by-hole scores (below)
				</div>
			
			</rich:panel>
				
			<div class="actionButtons">

				<h:commandButton id="save" value="Save" action="#{roundHome.persist}"
					disabled="#{!roundHome.wired}" rendered="#{!roundHome.managed}"/>

				<h:commandButton id="update" value="Save" action="#{roundHome.update}"
					rendered="#{roundHome.managed}"/>
						 
				<h:commandButton id="delete" value="Delete" action="#{roundHome.remove}"
					immediate="true" rendered="#{roundHome.managed}"/>
					
				<h:commandButton id="revert" value="Discard changes" action="#{roundHome.revert}"
					immediate="true" rendered="#{roundHome.managed}"/>

				<ui:remove>
				<s:button id="discard" value="Discard changes" view="/Round.xhtml" propagation="end"
					rendered="#{roundHome.managed}"/>
				</ui:remove>
				
				<s:button id="cancel" value="Cancel" view="/#{empty roundFrom ? 'RoundList' : roundFrom}.xhtml"
					rendered="#{!roundHome.managed}" propagation="end"/>
			</div>

			<!-- I cannot use switchType="ajax" because it breaks tab switching for some reason -->
			<rich:tabPanel switchType="client" selectedTab="#{round.teeSet != null ? 'scorecardTab' : 'teeSetTab'}">

				<rich:tab id="teeSetTab" label="Tee set *" labelClass="required">
					<div class="association" id="teeSetParent">
		
						<h:outputText value="Tee set not selected" rendered="#{round.teeSet == null}"/>
			
						<rich:dataTable id="teeSetTable" var="teeSet" value="#{round.teeSet}" rendered="#{round.teeSet != null}"
							rowClasses="rvgRowOne,rvgRowTwo">
							<h:column>
								<f:facet name="header">id</f:facet>
								#{teeSet.id}
							</h:column>
							<h:column>
								<f:facet name="header">Name</f:facet>
								#{teeSet.name}
							</h:column>
							<h:column>
								<f:facet name="header">Course</f:facet>
								#{teeSet.course.name}
							</h:column>
							<h:column>
								<f:facet name="header">Color</f:facet>
								<div title="#{teeSet.color}" class="colorSwatch" style="background-color: #{teeSet.color};"/>
							</h:column>
							<h:column>
								<f:facet name="header">Course Rating</f:facet>
								#{teeSet.getCourseRating(currentGolfer.gender)}
							</h:column>
							<h:column>
								<f:facet name="header">Slope Rating</f:facet>
								#{teeSet.getSlopeRating(currentGolfer.gender)}
							</h:column>
							<h:column>
								<f:facet name="header">Position</f:facet>
								#{teeSet.position}
							</h:column>
							<h:column>
								<f:facet name="header">action</f:facet>
								<s:link view="/TeeSet.xhtml" id="viewteeSet" value="View" propagation="none">
									<f:param name="teeSetId" value="#{teeSet.id}"/>
								</s:link>
							</h:column>
						</rich:dataTable>

						<div class="actionButtons">
							<h:commandButton value="Select tee set" action="selectTeeSet"/>
							<ui:remove>
							<s:button value="Select tee set" view="/TeeSetList.xhtml">
								<f:param name="from" value="RoundEdit"/>
							</s:button>
							</ui:remove>
						</div>
					</div>
				</rich:tab>
		
				<rich:tab id="scorecardTab" label="Scorecard" labelClass="required" rendered="#{round.teeSet != null}">
					<a:loadStyle src="resource:///css/table.xcss"/>
					<table class="dr-table rich-table" border="0" cellpadding="0" cellspacing="0">
						<colgroup>
							<col span="2" width="5%"/>
							<col span="18" width="5%"/>
						</colgroup>
						<thead>
							<tr class="dr-table-header rich-table-header">
								<th class="dr-table-headercell rich-table-headercell" colspan="20">#{round.teeSet.course.name}</th>
							</tr>
							<tr class="dr-table-subheader rich-table-subheader">
								<th class="dr-table-subheadercell rich-table-subheadercell" style="text-align: left;" colspan="2">
									<div style="float: left; margin-right: 5px;">HOLE</div>
									<div title="#{round.teeSet.color}" class="colorSwatch" style="float: left; background-color: #{round.teeSet.color}"/>
								</th>
								<a:repeat var="_score" value="#{round.scores.{s|s}}" rowKeyVar="index">
									<th class="dr-table-subheadercell rich-table-subheadercell">#{index + 1}</th>
								</a:repeat>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th class="dr-table-cell rich-table-cell" style="text-align: left;" colspan="2">Par</th>
								<a:repeat var="_score" value="#{round.scores.{s|s}}">
									<td class="dr-table-cell rich-table-cell" style="text-align: center; color: #A0A0A0">
										#{_score.hole.getPar(round.golfer.gender)}	
									</td>
								</a:repeat>
							</tr>
							<tr>
								<th class="dr-table-cell rich-table-cell" style="text-align: left;" colspan="2">Score</th>
								<a:repeat id="strokesRow" var="_score" value="#{round.scores.{s|s}}">
									<td class="dr-table-cell rich-table-cell" style="text-align: center;">
										<s:decorate id="strokesField" template="layout/editCell.xhtml">
											<h:inputText id="strokes" value="#{_score.strokes}" size="2"/>
										</s:decorate>
									</td>
								</a:repeat>
							</tr>
							<tr>
								<th class="dr-table-cell rich-table-cell" style="text-align: left;" colspan="2">Fairway</th>
								<a:repeat id="fairwayRow" var="_score" value="#{round.scores.{s|s}}">
									<td class="dr-table-cell rich-table-cell" style="text-align: center;">
										<h:outputText value="-" rendered="#{_score.hole.isPar3(round.golfer.gender)}"/>
										<h:selectOneMenu id="fairway" value="#{_score.fairway}" rendered="#{not _score.hole.isPar3(round.golfer.gender)}">
											<f:selectItem itemValue="" itemLabel="-"/>
											<f:selectItem itemValue="#{true}" itemLabel="y"/>
											<f:selectItem itemValue="#{false}" itemLabel="n"/>
										</h:selectOneMenu>
									</td>
								</a:repeat>
							</tr>
							<tr>
								<th class="dr-table-cell rich-table-cell" style="text-align: left;" colspan="2">GIR</th>
								<a:repeat id="girRow" var="_score" value="#{round.scores.{s|s}}">
									<td class="dr-table-cell rich-table-cell" style="text-align: center;">
										<h:selectOneMenu id="gir" value="#{_score.greenInRegulation}">
											<f:selectItem itemValue="" itemLabel="-"/>
											<f:selectItem itemValue="#{true}" itemLabel="y"/>
											<f:selectItem itemValue="#{false}" itemLabel="n"/>
										</h:selectOneMenu>
									</td>
								</a:repeat>
							</tr>
							<tr>
								<th class="dr-table-cell rich-table-cell" style="text-align: left;" colspan="2">Putts</th>
								<a:repeat id="puttsRow" var="_score" value="#{round.scores.{s|s}}">
									<td class="dr-table-cell rich-table-cell" style="text-align: center;">
										<s:decorate id="puttsField" template="layout/editCell.xhtml">
											<h:inputText id="putts" value="#{_score.putts}" size="2"/>
										</s:decorate>
									</td>
								</a:repeat>
							</tr>
						</tbody>
					</table>
				</rich:tab>

			</rich:tabPanel>
		</h:form>
	</ui:define>

</ui:composition>
